<script setup lang="ts">
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { onBeforeRouteLeave } from "vue-router";
import { Toast, Dialog } from "vant";
import type { Ref } from "vue";
import useConsultStore from "@/pinia/modules/consultStore/consultStore.ts";
import useUserStore from "@/pinia/modules/userStore/userStore.ts";
import router from "@/router/router.ts";
import PaySheet from "@/components/lib/PaySheet.vue";

const consultStore = useConsultStore();

const userStore = useUserStore();

const { patientInfo } = storeToRefs(userStore);

const { consult, consultOrderInfo, orderId } = storeToRefs(consultStore);

const isAgree: Ref<boolean> = ref<boolean>(false);

const showSheet: Ref<boolean> = ref<boolean>(false);



const openPay = async () => {
   if (!isAgree.value) return Toast.fail("请勾选支付协议");
   showSheet.value = true;
   try {
      await consultStore.createConsultOrder(consult.value);
      consultStore.clearConsult();
   } catch (error: any) {
      Toast.fail(error.message);
   }
};

const onClose = async (): Promise<boolean> => {
   try {
      await Dialog.confirm({ title: "关闭支付", message: "取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？", cancelButtonText: "仍要关闭", confirmButtonText: "继续支付" });
      return false;
   } catch (error: any) {
      consultStore.orderId = "";
      await router.push("/");
      return true;
   }
};



onMounted(async () => {
   await userStore.findPatient(consultStore.consult.patientId as string);
   await consultStore.fetchConsultOrderInfo({ type: consult.value.type, illnessType: consult.value.illnessType });
});


onBeforeRouteLeave(() => {
   if (orderId.value) return false;
});

</script>

<template>
   <div class="consult-pay-page">
      <NavBar left-text="返回" title="支付订单" @click-left="$router.back()" />
      <div class="pay-info">
         <img class="img" src="@/assets/avatar-doctor.svg" />
         <p class="desc">
            <span>极速问诊-图文问诊-{{ consultOrderInfo!.payment }} 元</span>
            <span>自动分配医生</span>
         </p>
      </div>
      <van-cell-group>
         <van-cell title="优惠券" :value="`-¥${consultOrderInfo.couponDeduction}`" />
         <van-cell title="积分抵扣" :value="`-¥${consultOrderInfo.pointDeduction}`" />
         <van-cell title="实付款" :value="`¥${consultOrderInfo.actualPayment}`" class="pay-price" />
      </van-cell-group>
      <div class="pay-space"></div>
      <van-cell-group>
         <van-cell title="患者信息" :value="`${patientInfo.name} | ${patientInfo.genderValue} | ${patientInfo.age}岁`"></van-cell>
         <van-cell title="病情描述" :value="consult.illnessDesc"></van-cell>
      </van-cell-group>
      <div class="pay-schema">
         <van-checkbox v-model="isAgree">我已同意 <span class="text">支付协议</span></van-checkbox>
      </div>

      <pay-sheet v-model:show="showSheet" :orderId="orderId" :payment="consultOrderInfo.actualPayment" :close="onClose" pay-callback="consult/chitchat"></pay-sheet>


      <van-submit-bar button-type="primary" :price="consultOrderInfo.actualPayment * 100" button-text="立即支付" text-align="left" @click="openPay" />
   </div>
</template>

<style lang="scss" scoped>
.consult-pay-page {
   padding: 0 0 50px 0;

   .pay-info {
      display: flex;
      padding: 15px;
      flex-wrap: wrap;
      align-items: center;

      .tit {
         width: 100%;
         font-size: 16px;
         margin-bottom: 10px;
      }

      .img {
         margin-right: 10px;
         width: 38px;
         height: 38px;
         border-radius: 4px;
         overflow: hidden;
      }

      .desc {
         flex: 1;

         > span {
            display: block;
            color: var(--cp-tag);

            &:first-child {
               font-size: 16px;
               color: var(--cp-text2);
            }
         }
      }
   }

   .pay-price {
      :deep {
         .vam-cell__title {
            font-size: 16px;
         }

         .van-cell__value {
            font-size: 16px;
            color: var(--cp-price);
         }
      }
   }

   .pay-space {
      height: 12px;
      background-color: var(--cp-bg);
   }

   .pay-schema {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;

      .text {
         color: var(--cp-primary);
      }
   }

   :deep(.van-submit-bar__button) {
      font-weight: normal;
      width: 160px;
   }


}
</style>
